<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>商品列表</span>
		</div>
		<el-form label-width="80px" :rules="rules" ref='tableData' :model="tableData">
			<el-form-item label="账户">
				<el-input :disabled="true" v-model="tableData.username"></el-input>
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="tableData.fullname"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="tableData.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机">
				<el-input v-model="tableData.tel"></el-input>
			</el-form-item>

			<el-form-item label="头像" prop="avatar">
				<single-upload :src.sync='tableData.avatar' upload-action='/api/upload/common/'
					default-image='http://localhost:3003/images/avatar/default.jpg'
					remove-action='/api/upload' :headers='header' :data="{type:'avatar'}"></single-upload>
			</el-form-item>
			
			<el-form-item label="">
				<el-button type="primary" @click='handleSave'>修改</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import singleUpload from '@/components/SingleUpload.vue'
	export default {
		components: {
			singleUpload
		},
		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`
				},
				tableData: [],
				rules: {
					username: [
						{ required: true, message: '请输入昵称', trigger: "blur" },
						{ min: 2, max: 30, message: '昵称长度在2到30字符之间', trigger: "blur" },
					],
					fullname: [
						{ required: true, message: '请输入昵称', trigger: "blur" },
						{ min: 2, max: 30, message: '昵称长度在2到30字符之间', trigger: "blur" },
					],
					email: [
						{ required: true, message: '请输入昵称', trigger: "blur" },
						{ min: 2, max: 30, message: '昵称长度在2到30字符之间', trigger: "blur" },
					],
					avatar: [
						{ required: true, message: '请上传头像', trigger: "blur" },
					],
					tel: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请输入正确的手机号',
							trigger: 'blur'
						}
					]
				},
			}
		},
		created() {
			this.tableData = { ...this.$store.state.account.info };
		},
		methods: {
			handleSave() {
				this.$refs.tableData.validate(async (valid) => {
					if (valid) {
						let { status, msg } = await this.$store.dispatch('account/updateInfo', { ...this
							.tableData });
						if (status) {
							this.$message.success(msg);
						} else {
							this.$message.error(msg)
						}
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.el-form {
		width: 70%;
		margin: 0 auto;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;

		.cover {
			position: absolute;
			width: 178px;
			height: 178px;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			font-size: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			transition: all 0.5s;
		}

		&:hover .cover {
			opacity: 1;
		}
	}
</style>
